{extend name="base" /}
{block name="title"}程序员圈子,技术交流,问题解答,吹水聊天|程序员的收藏夹-专注于程序员学习、分享{/block}

{block name="style"}
	<style type="text/css">
		.iceUpload-img{
			border: none !important;
		}
		.iceUpload-img .iceUpload-info {
			width: 80px;
		    height: 80px;
		}
		.iceUpload-img .iceUpload-info img{
			object-fit: cover;
		    width: 80px;
		    height: 80px;
		}
	</style>
{/block}

{block name="header"}
	{include file="public/user_header" /}
{/block}

{block name="content"}
<template class="iceView">
<div class="zbd-content">
	<div class="page mt15">
		<div class="w300">

			<div class="box1 yy" style="display:none;">
				<div class="title-l fon14">推荐圈子</div>
				<div class="bbs-item">
					<div class="qz-pic left">
						<img src="https://statics.bibabi.com/imgs/be/2a/12/cb/mpySbm5kbJNrlJSTcw==-12cb.png@!100x100" alt="" class="covers">
					</div>
					<div class="qz-desc left">
						<div class="el qz-h a-line">互联网圈子</div>
						<div class="el qz-bz">互联网正在发生的事情</div>
						<div class="black"><span class="blue">话题 0 </span>&nbsp; · &nbsp;<span class="blue">成员 1</span></div>
					</div>
				</div>
				<div class="bbs-item">
					<div class="qz-pic left">
						<img src="https://statics.bibabi.com/imgs/be/2a/12/cb/mpySbm5kbJNrlJSTcw==-12cb.png@!100x100" alt="" class="covers">
					</div>
					<div class="qz-desc left">
						<div class="el qz-h a-line">互联网圈子</div>
						<div class="el qz-bz">互联网正在发生的事情</div>
						<div class="black"><span class="blue">话题 0 </span>&nbsp; · &nbsp;<span class="blue">成员 1</span></div>
					</div>
				</div>
				<div class="bbs-item">
					<div class="qz-pic left">
						<img src="https://statics.bibabi.com/imgs/be/2a/12/cb/mpySbm5kbJNrlJSTcw==-12cb.png@!100x100" alt="" class="covers">
					</div>
					<div class="qz-desc left">
						<div class="el qz-h a-line">互联网圈子</div>
						<div class="el qz-bz">互联网正在发生的事情</div>
						<div class="black"><span class="blue">话题 0 </span>&nbsp; · &nbsp;<span class="blue">成员 1</span></div>
					</div>
				</div>

				<div class="bbs_list_item p10 cursor-pointer text-center"><a href="/bbs/circle" class="gray">查看全部圈子 <i class="icon ice-arrow-round-r gray"></i></a></div>
			</div>

			<div class="box1 yy" i-if="{{bbsTypeList.length > 0}}" data-scroll-class="fiexdLeftTop" data-scroll-top="550" data-scroll-delay="1" data-scroll-type="auto">
				<div class="title-l fon14">圈子话题</div>
				<div class="p10 row">
					<a i-for="{{bbsTypeList}}" href="javascript:;" class="w6 inline-block small topic {{type_id == item.id ? 'blue bold' : ''}}" i-onclick="NextBbs" data-type="leftTags" data-type_id="{{item.id}}" >#{{item.type_name}}#</a>
				</div>
			</div>

			<div class="tip bg-red">
				<p class="bold red">温馨提示：</p>
				<p class="red">不要随便添加圈子里的任何形式的联系方式，保护个人信息安全，避免上当受骗</p>
			</div>
		</div>

		<div class="w700 left">
			<div class="box1 pt20 pl15 pr15 pb15">
				<textarea class="form-control border-gray no-hover resize-none bbs-pub-content" name="content" id="content" placeholder="程序员都有自己的想法,唠一唠"></textarea>
				<input type="hidden" id="bbs_imgs" value="">
				<div class="bbs-nav">
					<div class="iceUpload-img" data-name="file" data-accept="image/*" data-url="/Upload/uploadPic" data-del="imgDelBbs" data-success="imgSuccessBbs">
					    <div class="btn min icon ice-upload bg-black shangchuan">&nbsp;选择图片</div>
					</div>
					<button type="button" class="btn bg-blue min right" i-onclick="commitBbs">发布</button>
					<div class="fenleis">
						<select class="select ml10 slk" data-clear="false" name="type_id" id="type_id" style="width: 120px;">
							{foreach $type_list as $key => $val}
					        <option value="{$val['id']}" class="red">#{$val['type_name']}#</option>
					        {/foreach}
					    </select>
					</div>
				</div>
			</div>
			<div class="box1" data-scroll-class="gd-bbs-navs" data-scroll-top="350" data-scroll-delay="1" data-scroll-type="auto">
				<div class="bbs-link-nav">
					<span i-onclick="NextBbs" data-type="topMenu" data-mval="all" class="icon a-line bbs-link ice-arrow-round-r {{mval == 'all' ? 'blue' : ''}}"> 最新发布</span>
					<span i-onclick="NextBbs" data-type="topMenu" data-mval="hot" class="icon a-line bbs-link ice-arrow-round-r {{mval == 'hot' ? 'blue' : ''}}"> 热门动态</span>
					<span i-onclick="NextBbs" data-type="topMenu" data-mval="me" class="icon a-line bbs-link ice-arrow-round-r {{mval == 'me' ? 'blue' : ''}}"> 我的动态</span>
					<span i-onclick="NextBbs" data-type="topMenu" data-mval="follow" class="icon a-line bbs-link ice-arrow-round-r {{mval == 'follow' ? 'blue' : ''}}"> 我的关注</span>
					<span class="bbs-link right icon ice-renovate blue bold" i-onclick="NextBbs" data-type="refresh"> 刷新动态</span>
				</div>
			</div>
			<div id="bbs_list" style="min-height: 600px;">
				<div class="box1 bbs_list_item p20 text-center" i-if="{{ShowEmpty}}">
					<img src="/static/web/zbdui/src/img/m.png" style="width: 150px;">
					<p class="text-center mt30">{{ShowEmptyMsg}}</p>
				</div>

				<div i-for="bbsList" i-index="index" i-item="item" class="box1 bbs_list_item p20">
					<div class="bbs_list_item_hed">
						<a href="javascript:;"><img class="bbs-avatar left" i-src="{{item.bbsUser.avatar}}"></a>
						<div class="bbs_user left">
							<div class="bbs_user_name"><a href="javascript:;" class="a-line">{{item.bbsUser.nickname}}</a> <span i-if="{{this_login_user_id != item.bbsUser.id}}" class="border-red gz" i-onclick="follow" data-fans_id="{{item.bbsUser.id}}">{{item.this_is_follow == 1 ? '我的关注' : '求关注'}}</span></div>
							<div class="bbs_user_desc">{{item.bbsUser.descs ? item.bbsUser.descs : '这老表什么都没留下~'}}</div>
							<span class="bbs_date">{{item.create_time}}</span>
						</div>
					</div>
					<div class="bbs-map mt10" i-if="{{item.is_hot == 1}}"><span class="icon ice-bar-chart bbs-map-name orange">&nbsp;热门推荐</span></div>

					<div class="bbs_comtent cursor-pointer">
						<a href="javascript:;" i-if="{{item.bbsType.type_name}}" class="mr5 orange" data-notes="{position:'right',content:'来自“互联网圈子”的动态,前往查看更多'}">#{{item.bbsType.type_name}}#</a><pre>{{item.content}}</pre>
						<p><a href="/bbs/detail?bbs_id={{item.id}}" class="seebbs icon ice-arrow-triangle-r"> 查看详细</a></p>
					</div>

					<div class="bbs_pic_list">
						<img class="img-view bbs_pic" i-for="{{item.bbs_imgs}}" i-index="imgsIndex" i-item="imgsItem" i-src="{{imgsItem}}">
					</div>

					<!-- <div class="bbs-map mt10"><span class="icon ice-map bbs-map-name"> 广东 广州</span></div> -->

					<div class="bbs_action">
						<div class="bbs_zan_pic_list left">
							<span i-if="{{item.bbsLike.length > 0}}">
								<a href="javascript:;" i-for="{{item.bbsLike}}" i-index="likeIndex" i-item="likeItem">
									<img class="align-middle bbs_zan_pic" i-src="{{likeItem.avatar}}">
								</a>
							</span>
							<i class="zan-total" i-if="{{item.bbs_like_count > 0}}">共{{item.bbs_like_count}}人点赞</i>
							<i class="zan-total" i-if="{{item.bbs_like_count == 0}}">快来首赞呗!</i>
						</div>
						<div class="right">
							<a href="javascript:;" class="icozdy icon ice-view"> 足迹 {{item.browse}}</a>
							<a href="/bbs/detail?bbs_id={{item.id}}" class="icozdy icon ice-speak"> 评论 {{item.bbs_comment_count}}</a>
							<a href="javascript:;" class="icozdy icon ice-heart-on {{item.bbsCk.length > 0 ? 'red' : ''}}" i-onclick="onLike" data-indexs="{{index}}" data-bbs_id="{{item.id}}"> 点赞 {{item.bbs_like_count}}</a>
						</div>
					</div>

					<div class="bbs-comment-list" i-if="{{item.bbs_comment_count > 0}}">
						<!-- 一级评论 -->
						<div class="mt10" i-for="{{item.bbsComment}}" i-index="commentIndex" i-item="commentItem" >
							<p><a class="a-line cm-user black" href="javascript:;">{{commentItem.user.nickname}}</a><span i-if="{{item.user_id == commentItem.user.id}}" class="zbd-tags bg-red">作者</span>&nbsp;:&nbsp;{{commentItem.msg}}<i class="shijian">{{commentItem.create_time}}</i></p>
							
							<!-- <!-- 子级评论 -->
							<div class="msg-dub" i-if="{{commentItem.somCommentList.length >0 }}">
								<p  i-for="{{commentItem.somCommentList}}" i-index="somIndex" i-item="somItem" ><a class="a-line cm-user black" href="javascript:;">{{somItem.user.nickname}}</a><span i-if="{{item.user_id == somItem.user.id}}" class="zbd-tags bg-red mr5">作者</span>&nbsp;回复了&nbsp;<a class="a-line cm-user black ml5" href="javascript:;">{{commentItem.user.nickname}}</a>:{{somItem.msg}}<i class="shijian">{{somItem.create_time}}</i></p>
							</div> -->
						</div>

						<p class="mt15"><a class="cm-user black" href="/bbs/detail?bbs_id={{item.id}}">查看更多评论({{item.bbs_comment_count}}) <span class="icon ice-arrow-triangle-r black"></span></a></p>
					</div>
				</div>
				

				<div class="box1 bbs_list_item p10 cursor-pointer text-center loadText"><a href="javascript:;" i-onclick="NextBbs" data-type='next'><span id="loadText">点击加载更多动态</span> <i class="icon ice-arrow-triangle-b"></i></a></div>
			</div>
		</div>

		<div class="w200 left">
			{if condition="$userHomeInfo"}
			<div class="box1 yy" data-scroll-class="fiexdLeftTop" data-scroll-top="550" data-scroll-delay="1" data-scroll-type="auto">
				<div class="bbs-user-info">
					<div class="text-center">
						<img class="avapic img-view" src="http://pic.zhengbingdong.cn/upload/20220330/09d81ed4b6c44f9441748b382870f91c.png">
					</div>
					<div class="avapic-wai-r">
						<div class="avapic-wai-name el">{$userHomeInfo['nickname']|default='-'}</div>
						<!-- <div class=""><span class="tag tag-radius bg-red">关注</span></div> -->
					</div>
				</div>
				<div class="row text-center p10">
				    <div class="col"><p class="user-li">发布 <span class="ani-num1" id="u_bbs_count">{$userHomeInfo['bbs_count']|default='0'}</span></p></div>
				    <div class="col"><p class="user-li">关注 <span class="ani-num1" id="u_follow_count">{$userHomeInfo['follow_count']|default='0'}</span></p></div>
				    <div class="col"><p class="user-li">粉丝 <span class="ani-num1" id="u_fans_count">{$userHomeInfo['fans_count']|default='0'}</span></p></div>
				</div>
			</div>
			{else /}
			<div class="box1 yy">
				<div class="text-center pt40 pb40 lep"><a onclick="ShowLogin(this)" href="javascript:;" class="bold">登录</a>后显示更多</div>
			</div>
			{/if}
			<div class="box1 yy">
				<div class="title-l fon14">活跃用户</div>
				<div class="text-center">
					{foreach $hy_user as $key => $val}
				    <a href="javascript:" class="ws60">
				    	<img class="ava-hy" src="{$val['avatar']}">
				    	<p class="el nkc">{$val['nickname']}</p>
				    </a>
				    {/foreach}
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" id="this_login_user_id" value="{$userInfo['id']|default=''}">
</template>
<script src="/static/web/zbdui/src/view/iceView.js"></script>
<script type="text/javascript">

	ice(function(){
		
		// 发布
		// ice(".JS-commit").click(function(){
		// 	var datas = {
		// 		bbs_imgs : ice("#bbs_imgs").val(),
		// 		content : ice("#content").val(),
		// 		type_id : ice("#type_id").val()
		// 	}
		
		// 	ice.ajax({
		// 	    url:'/AjaxSyn/bbsRelease',
		// 	    type:'post',
		// 	    data:datas,
		// 	    success:function(res){
		// 	        if(res.code == 1){
		// 	            ice.pop({content:res.message})
		// 	            return false;
		// 	        }else{
		// 	        	ice.pop({content:res.message,icon:'success'})
		// 	        	ice("#u_bbs_count").html(parseInt(ice("#u_bbs_count").html())+1)
		// 	        	ice("#content").val('')
		// 				ice("#bbs_imgs").val('')
		// 				ice(".iceUpload-item").del()
		// 				ice("#type_id").val('')
		// 				ui.init();
		// 	        }
		// 	    }
		// 	});
			
		// })
	})
	
	// 删除图片
	function imgDelBbs(e,list){
        ice("#bbs_imgs").val(list.join(','))
    }

    // 上传成功的图片
    function imgSuccessBbs(e,list){
        ice("#bbs_imgs").val(list.join(','))
    }

    ice.view({
    	this_login_user_id:'',
    	ShowEmpty: false,
    	ShowEmptyMsg: '暂无圈子动态!',
    	mval: 'all',
    	page:1,
    	limit:10,
    	type_id:'',
    	bbsList:[],
    	bbsTypeList:[],
    	bbsListShow: false,
    	follow: function(e){
    		// 关注与取消关注
    		var fans_id = ice(e).attr('data-fans_id');
    		if(!fans_id){
    			return false;
    		}
    		var that = this;
    		ice.ajax({
			    url:'/AjaxSyn/follow',
			    type:'get',
			    data:{
			    	fans_id : ice(e).attr('data-fans_id')
			    },
			    success:function(res){
			        if(res.code == 1){
			            ice.pop({content:res.message,icon:'warning'})
			            return false;
			        }else{
			        	// 判断是关注还是取消关注
			        	if(res.data == 1){
			        		var message = '已关注TA'
			        		ice.pop({content:message, icon:'success'})
			        		ice("#u_follow_count").html(parseInt(ice("#u_follow_count").html())+1)
			        		// ice(e).html('已关注')
			        	} else{
			        		// ice(e).html('求关注')
			        		var message = '已取消关注'
			        		ice.pop({content:message})
			        		ice("#u_follow_count").html(parseInt(ice("#u_follow_count").html())-1)
			        	}

			        	for (var i = 0; i < that.bbsList.length; i++) {
			        		that.bbsList[i]['this_is_follow'] = res.data
			        	}

			   //      	that.set({
						// 	bbsList: that.bbsList
						// })
			        }
			    }
			});
    	},
    	commitBbs: function(e){
    		console.log('commitBbs')
    		var that = this;
    		var datas = {
				bbs_imgs : ice("#bbs_imgs").val(),
				content : ice("#content").val(),
				type_id : ice("#type_id").val()
			}
		
			ice.ajax({
			    url:'/AjaxSyn/bbsRelease',
			    type:'post',
			    data:datas,
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message})
			            return false;
			        }else{
			        	ice.pop({content:res.message,icon:'success'})
			        	ice("#u_bbs_count").html(parseInt(ice("#u_bbs_count").html())+1)
			        	ice("#content").val('');
						ice("#bbs_imgs").val('');
						ice(".iceUpload-item").del();
						ice("#type_id").val('');
						that.mval = 'me';
						that.page = 1;
						that.type_id = '';
						that.NextBbs();
			        }
			    }
			});
    	},
    	NextBbs: function(e){

    		// 点击事件
    		var that = this
    		that.ShowEmptyMsg = '暂无圈子动态!';

    		// 获取判断点击类型,不同类型做不一样的操作
    		var type = ice(e).attr('data-type');
    		var nextPage = 1;

    		if(type == 'next'){
    			// 下一页
    			var nextPage = that.page + 1

    		} else if(type == 'refresh'){

    			// 刷新操作
    			that.mval = 'all';
    			that.type_id = '';
    			that.bbsList = [];
    			
    		} else if(type == 'topMenu'){

    			// 点击顶部菜单
    			var mval = ice(e).attr('data-mval');
    			that.mval = mval;
    			that.type_id = '';
    			that.bbsList = [];
    			
    		} else if(type == 'leftTags'){

    			// 点击左侧分类
    			var type_id = ice(e).attr('data-type_id');
    			that.type_id = type_id;
    			that.mval = 'all';
    			that.bbsList = [];
    			
    		} else{

    			var nextPage = 1;
    		}

    		ice("#loadText").html('正在加载动态...');
    		ice.ajax({
			    url:'/Bbs/ajaxBbsList',
			    type:'get',
			    data:{
			    	page : nextPage,
	    			limit : that.limit,
	    			type_id: that.type_id,
	    			mval: that.mval,
			    },
			    success:function(res){
			    	ice("#loadText").html('点击加载更多动态');
			    	if(res.code == 1){
			    		ice.pop({content:res.message})
			            return false;
			    	}

			    	if(res.data.length > 0){
			    		ice(".loadText").show();
    					that.ShowEmpty = false;

			    		if(type == 'next'){

			    			// 下一页 追加
			    			that.bbsList = that.bbsList.concat(res.data);

			    		} else if(type == 'refresh'){

			    			// 刷新 替换
			    			ice.pop({content:'刷新成功', icon: 'success'})
			    			that.bbsList = res.data

			    		} else if(type == 'topMenu'){

			    			// 点击顶部菜单 替换
			    			that.bbsList = res.data
			    		}else if(type == 'leftTags'){

			    			// 点// 点击左侧分类
			    			that.bbsList = res.data
			    		} else{

			    			that.bbsList = res.data
			    		}
			    		
			    		that.set({
							bbsList: that.bbsList,
							page: nextPage
						})
						ui.init();
			    	} else{

			    		var bbsListLength = that.bbsList.length
			    		if(bbsListLength == 0){
			    			that.ShowEmpty = true;
			    			ice("#loadText").html('动态全部加载完');
			    			ice(".loadText").hide();
			    			return false;
			    		}

			    		// 加载到没有的情况
			    		ice.pop({content:'动态全部加载完', icon: 'warning'})
			    		ice("#loadText").html('动态全部加载完');
			    		ice(".loadText").hide();
			    	}
			    }
			});
    	},
    	onLike: function(e) {
    		// 点赞
    		var that = this
    		var bbs_index = ice(e).attr("data-indexs");
    		ice.ajax({
			    url:'/AjaxSyn/bbsLike',
			    type:'get',
			    data:{
			    	bbs_id : ice(e).attr("data-bbs_id"),
			    },
			    success:function(res){
			        if(res.code == 1){
			        	if(res.message=='请先登录'){
			        		ShowLogin();
			        		return false;
			        	}
			            ice.pop({content:res.message})
			            return false;
			        }else{
			        	ice.pop({content:res.data.msg})
			        	that.bbsList[bbs_index] = res.data.detail;
						// that.set({
						// 	bbsList: that.bbsList
						// })
			        }
			    }
			});
    	},
    	onload: function(){
    		var that = this
    		that.this_login_user_id = ice("#this_login_user_id").val()
    		ice("#loadText").html('正在加载动态...');
    		ice.ajax({
			    url:'/Bbs/ajaxBbsList',
			    type:'get',
			    data:{
			    	page : that.page,
	    			limit : that.limit,
	    			type_id: that.type_id,
	    			mval: that.mval,
			    },
			    success:function(res){
			    	ice("#loadText").html('点击加载更多动态');
			        if(res.code == 1){
			            ice.pop({content:res.message})
			            return false;
			        }else{
			        	
		                that.set({
			                bbsList:res.data,
			            })
    					ui.init();
			        }
			    }
			});

    		// 获取分类
			ice.ajax({
			    url:'/Bbs/ajaxBbsTypeList',
			    type:'get',
			    data:'',
			    success:function(res){
			    	that.set({
		                bbsTypeList:res.data,
		            })
					ui.init();
			    }
			});

			// ui.select();
    	}
    })
</script>
{/block}